<script lang="ts" setup>
import { ref,reactive, watch} from 'vue'
import { getDataApi,getType } from '@/apis/my'
import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'; 
const staterange = ref([
			{ value: 1, text: "结清 " },
	        { value: 2, text: "驳回" },
	        { value: 3, text: "待结清" },
]
)
const reactiveData = reactive<any>({
	 billStatus:'',
	 billTypeId:'',
	 st:undefined,
	 et:undefined,
	 page: 1,
	 limit: 10,
 })
 const dataType = ref<any[]>([])
 const data = ref<any>([])
getType().then((res: any)=>{
	dataType.value = res.map((item: { name: any; id: any; }) => {
		return {"text": item.name, "value": item.id}
	})
})
getData()
let isOver = false
function getData(){
	getDataApi(reactiveData).then((res)=>{
		isOver = res.list.length === 0;
		reactiveData.page===1 ? data.value = res.list : data.value.push(...res.list)
	})
}
function orderdetail(id: any){
	uni.navigateTo({
		url:"/pages/my/orderdetail?id=" + id
	})
}
function timeChange(val: any[]){
	reactiveData.st = val[0]
	// console.log(time.value[0] +" 00:00:00")
	reactiveData.et = val[1]
}
function change(){
	reactiveData.page=1
	// console.log(reactiveData.billStatus)
}
watch(reactiveData,() => {
	// console.log(time.value)
		getData()
	
})


 onPullDownRefresh(()=>{
	 setTimeout(function () {
		getData()
	 	uni.stopPullDownRefresh();
	}, 1000);
 })
 
 onReachBottom(()=>{
	 if (isOver){
	 		return;
	 	}
	 reactiveData.page++
	 // getData()
 })

</script>

<template>
	<view class="">
		<view class="display">
			<view style="width:49%;">
			    <uni-data-select
				placeholder="选择状态"
			      v-model="reactiveData.billStatus"
			      :localdata="staterange"
			      @change="change"
			    />
			  </view>
			  <view style="width:49%;">
			      <uni-data-select
				  placeholder="选择类型"
			        v-model="reactiveData.billTypeId"
					:localdata="dataType"
			        @change="change"
			      />
			</view>
		</view>
		<view class="">
			<view class="example-body">
				<uni-datetime-picker  type="daterange" @change="timeChange"/>
			</view>
		</view>
		<view class="order" v-for="(item,index) in data" :key="index" @click="orderdetail(item.id)">
			<view class="display">
				<view class="" style="font-weight: 500; line-height: 65rpx;">{{item.billName}}</view>
				<u-tag :text=" item.billStatus== 1 ? '结清 ' : item.billStatus==2 ? '驳回':'待结清'" 
				:type="item.billStatus== 1 ? 'success' : item.billStatus==2 ? 'error':'warning'" plain/>
			</view>
			<hr />
			<view class="" style="text-align: center;">
				<view class="font-size">付款金额</view>
				<view>{{item.amount}}</view>
				<view class="color">账单详情 ></view>
			</view>
			<view class="paymentDisplay">
				<view class="font-size float">付款方式</view>
				<text>{{item.billTypeName}}</text>
			</view>
			<view class="paymentDisplay">
				<view class="font-size float">收款人</view>
				<text>{{item.gatherName}}</text>
			</view>
			<view class="paymentDisplay" v-show="item.billStatus!==3">
				<view class="font-size float">{{item.billStatus== 1 ? '结清' : '驳回'}}时间</view>
				<text>{{item.handleTime}}</text>
			</view>
		</view>
		
		<!-- <view class="button">
			<u-button text="上传订单回执" type="primary" :plain="true"/>
		</view> -->
	</view>
</template>

<style>
	.float{
		width: 140rpx;
		text-align: right;
		margin-right: 30rpx;
	}
	.color{
		color: #cccccc;
	}
	.font-size{
		/* font-weight: 600; */
	}
	.paymentDisplay{
		display: flex;
		flex-wrap: wrap;
		/* margin-left: 20rpx; */
	}
	.state{
	    width: 100rpx;
	    text-align: center;
	    border-radius: 8px;
		color: black;
		font-weight: 800;
		font-size: 25rpx;
	}
	page{
		background-color: #f3f3f3;
	}
	/* .buttonPosition{
		position: relative;
	} */
	/* .button{
		width: 500rpx;
		 position: absolute;
		    bottom: 10px;
		    left: 50%;
		    margin-left: -104.5px;
	} */
	.display{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.order{
		font-size: 30rpx;
		margin: 20rpx;
		background-color: #fff;
		border-radius: 5px;
		padding: 10rpx;
	}
</style>